<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Raster</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../lib/paper.js"></script>
<script type="text/javascript">
// http://en.wikipedia.org/wiki/Lenna
var raster = null;
var grid = null;
var showBug = true;

function Grid()
{
	this.v = new Array();
	this.h = new Array();
	var m = raster.matrix.clone();
	if(!showBug)
		m.translate(-raster.width /2, -raster.height /2);
	var color = new paper.RgbColor(0, 1, 0);
	for(var i = 0; i < raster.width; i += 100)
	{
		var t = new paper.Point(i ,0);
		var b =  new paper.Point(i, raster.height);
		var vl = new paper.Path.Line(t.transform(m),b.transform(m))
		vl.strokeColor = color;
		this.v.push(vl);
	}
	for(var i = 0; i < raster.height; i += 100)
	{
		var t = new paper.Point(0 ,i);
		var b =  new paper.Point(raster.width, i);
		var vl = new paper.Path.Line(t.transform(m),b.transform(m))
		vl.strokeColor = color;
		this.h.push(vl);
	}
}

Grid.prototype.clean = function()
{
	for(var i = 0; i < this.v.length; i++)
	{
		this.v[i].remove();
	}
	for(var i = 0; i < this.h.length; i++)
	{
		this.h[i].remove();
	}
}

function switchView()
{
	showBug = !showBug;
	grid.clean();
	grid = new Grid();
	paper.view.draw();
}

window.onload = function()
{
	var canvas = document.getElementById('canvas');
	paper.setup(canvas);
	var tool = new paper.Tool();
	raster = new paper.Raster('lenna');
	raster.position = paper.view.center;
	grid = new Grid();
	paper.view.draw();
}
</script>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<img width="512" height="512" id="lenna" style="display: none;"
src="" />
<div style="position:absolute;top:10px;left:30px;">Raster.matrix is
translated by half the size of the raster. If not posible to fix it,
might be a good idea to document it.</div>
<input type="button" value="Hide Bug"
onclick="switchView();if(showBug)this.value = 'Hide Bug';else
this.value='Show Bug'" style="position:absolute;top:30px;left:30px;"/>
</body>
</html>